{% extends 'base.html' %}
{% load staticfiles %}

{% block base_title %}
    {{ title }}列表
{% endblock base_title %}



{% block base_header_js %}
    <script src="{% static 'plugins/ckeditor/ckeditor.js' %}"></script>
    <link href="{% static 'plugins/ckeditor/plugins/codesnippet/lib/highlight/styles/monokai_sublime.css' %}"
          rel="stylesheet"/>
    <script src="{% static 'plugins/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js' %}"></script>
    <script>hljs.initHighlightingOnLoad();</script>

    <style>
        pre {
            padding: 0;
            margin: 0 0 10px;
            font-size: 13px;
            background-color: #f5f5f5;
            border: none;
        }
    </style>

    <link rel="stylesheet" href="{% static 'plugins/bootstrap_date/bootstrap-select.css' %}" type="text/css">
    <script src="{% static 'plugins/bootstrap_date/bootstrap-select.js' %}"></script>

    <script type="text/javascript">
        $(window).on('load', function () {
            $('.selectpicker').selectpicker({
                'selectedText': 'cat',
            });
        })
    </script>

    <!-- 下拉选择框 -->
    <script type="text/javascript">
        $(window).on('load', function () {
            $('.selectpicker2').selectpicker({
                'selectedText': 'cat',
                'width': '150',
            });
        })
    </script>

    <style>
        .selectpicker1 .bootstrap-select.btn-group {
            margin-bottom: 0px;
            margin-left: 0;
        }

        .selectpicker1 .bootstrap-select > button {
            padding-top: 4px;
            padding-bottom: 4px;
        }
    </style>
{% endblock base_header_js %}


{% block base_content %}
    <div class="app-content">
        <div class="app-content-body fade-in-up">
            <div class="padder" style="padding-top: 10px;">
                <!-- 左边导航栏 -->
                <div class="col-sm-12" style="padding-left: 0; padding-right: 0;">
                    <div class="panel panel-default" id="body-content">

                        <div class="panel-heading">
                            <div style="display: block; border-left: 5px solid #1c2b36; padding-left: 10px; font-size: 20px; font-weight: bolder; line-height: 25px;color: #1c2b36;">
                                {{ title }}列表{% ifnotequal keyword '' %}&nbsp;&nbsp;
                                ："{{ keyword }}" 关键字搜索结果{% endifnotequal %}
                            </div>
                        </div>

                        <div class="panel-body" id="table_content">
                            <div class="selectBox">
                                <a class="btn btn-sm btn-default" data-toggle="modal" data-target="#AddDocumentModal">
                                    <i class="fa fa-plus"></i> 添加{{ title }}
                                </a>

                                <span class="selectpicker1">
                                    <select id="user_chose" class="selectpicker2" data-live-search="true">
                                        <option value="0" {% if check_user == 0 %}selected{% endif %}>所有用户</option>
                                        {% for each_user in users %}
                                            <option value="{{ each_user.id }}" {% if check_user == each_user.id %}selected{% endif %}>{{ each_user.chinese_name }}</option>
                                        {% endfor %}
                                    </select>
                                </span>

                                <!-- 功能 -->
                                <form class="navbar-form pull-right " role="search" style="margin-top: 0;">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input type="text" name="keyword"
                                                   class="form-control input-sm bg-light no-border rounded "
                                                   placeholder="关键词查找记录" style="width: 150px;">
                                            <span class="input-group-btn">
                                            <button type="submit" class="btn btn-sm bg-auto rounded">
                                                <i class="fa fa-search"></i>
                                            </button>
                                        </span>
                                        </div>
                                    </div>
                                </form>
                                <span style="font-size: 14px; padding-top: 5px;" class="pull-right">共 <b
                                        style="color: orangered">{{ doc_nums }}</b> 条</span>
                            </div>

                            <!-- 列表 -->
                            <div class="row">
                                <div class="col-sm-12">
                                    <table class="table table-striped table-bordered">
                                        <!-- 标题行 -->
                                        <thead>
                                        <tr role="row">
                                            <th class="text-center" width="60">ID</th>
                                            <th class="text-center">标题</th>
                                            <th class="text-center">标签</th>
                                            <th class="text-center">类型</th>
                                            <th class="text-center">作者</th>
                                            <th class="text-center">添加日期</th>
                                            <th class="text-center">更新人</th>
                                            <th class="text-center">更新日期</th>
                                            <th class="text-center">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        {% if docs.object_list %}
                                            {% for each_doc in docs.object_list %}
                                                <tr class="gradeX odd" role="row">
                                                    <td class="text-center"
                                                        style="vertical-align:middle;">{{ forloop.counter }}</td>
                                                    <td class="text-center" style="vertical-align:middle;"><a
                                                            href="{% url 'document:doc_detail' each_doc.id %}">{{ each_doc.subject }}</a>
                                                    </td>
                                                    <td class="text-center" style="vertical-align:middle;">
                                                        {% for tag in each_doc.tags.all %}{% if forloop.counter == 1 %}
                                                            {{ tag.name }}{% else %},{{ tag.name }}
                                                        {% endif %}{% endfor %}</td>
                                                    <td class="text-center"
                                                        style="vertical-align:middle;">{{ each_doc.get_belong_display }}</td>
                                                    <td class="text-center"
                                                        style="vertical-align:middle;">{{ each_doc.add_user.chinese_name }}</td>
                                                    <td class="text-center"
                                                        style="vertical-align:middle;">{{ each_doc.add_time }}</td>
                                                    <td class="text-center"
                                                        style="vertical-align:middle;">{{ each_doc.update_user.chinese_name }}</td>
                                                    <td class="text-center"
                                                        style="vertical-align:middle;">{{ each_doc.update_time }}</td>
                                                    <td class="text-center" style="vertical-align:middle;">
                                                        <a href="{% url 'document:doc_detail' each_doc.id %}"
                                                           class="btn btn-xs"
                                                           style="background-color: #009688;color: white;">
                                                            查看详情
                                                        </a>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        {% else %}
                                            <td class="text-center" colspan="10" style="vertical-align:middle;">暂无相关文档
                                            </td>
                                        {% endif %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>

                        <!-- 页码 -->
                        <div class="panel-footer" style="padding-top: 0; padding-bottom: 0;">
                            <div class="text-center">
                                <ul class="pagination" style="margin-top: 10px; margin-bottom: 10px;">

                                    <!-- 上一页 -->
                                    {% if docs.has_previous %}
                                        <li><a href="?{{ docs.previous_page_number.querystring }}">上一页<span
                                                class="sr-only"></span></a></li>
                                        <li><a href="?{{ docs.previous_page_number.querystring }}">&laquo;<span
                                                class="sr-only"></span></a></li>
                                    {% endif %}

                                    <!-- 页码 -->
                                    {% for page in docs.pages %}
                                        {% if page %}
                                            <!-- 当前页 -->
                                            {% ifequal page docs.number %}
                                                <li class="active"><a href="?page={{ page }}">{{ page }}<span
                                                        class="sr-only">(current)</span></a></li>
                                                <!-- 其它页 -->
                                            {% else %}
                                                <li><a href="?page={{ page }}">{{ page }}<span
                                                        class="sr-only"></span></a></li>
                                            {% endifequal %}
                                            <!-- 省略页 -->
                                        {% else %}
                                            <li><a href="">...<span class="sr-only"></span></a></li>
                                        {% endif %}
                                    {% endfor %}

                                    <!-- 下一页 -->
                                    {% if docs.has_next %}
                                        <li><a href="?{{ docs.next_page_number.querystring }}">&raquo;<span
                                                class="sr-only"></span></a></li>
                                        <li><a href="?{{ docs.next_page_number.querystring }}">下一页<span
                                                class="sr-only"></span></a></li>
                                    {% endif %}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


{% endblock base_content %}


{% block base_footer_html %}
    <div class="modal inmodal" id="AddDocumentModal" tabindex="-1" role="dialog" aria-hidden="true"
         data-backdrop="static">
        <div class="modal-dialog" style="width: 1000px;">
            <div class="modal-content">

                <div class="modal-header"
                     style="background-color: #1c2b36; color: white;padding-top: 10px; padding-bottom: 10px;">
                    <button type="button" class="close" data-dismiss="modal">
                        <i class="icon-close" style="font-size: 18px;"></i>
                    </button>
                    <h4 class="modal-title">添加文档</h4>
                </div>

                <form method="post" id="id_AddDocumentForm">
                    <div class="modal-body">

                        <div class="form-group" style="vertical-align: middle;line-height: 34px;padding-bottom: 30px;">
                            <div class="col-md-1">
                                <span style="font-size: 14px;">标题：</span>
                            </div>
                            <div class="col-md-11" style="padding: 0;">
                                <input type="text" class="form-control" placeholder="请在此输入标题"
                                       maxlength="30" name="subject" required="">
                            </div>
                        </div>

                        <div class="form-group"
                             style="vertical-align: middle;line-height: 34px;padding-bottom: 30px;">
                            <div class="col-md-1">
                                <span style="font-size: 14px;">标签：</span>
                            </div>
                            <div class="col-md-11" style="padding: 0;">
                                <input type="text" class="form-control" placeholder="文档标签（多个使用英文逗号隔开）"
                                       maxlength="50" name="tags" required="">
                            </div>
                        </div>

                        <div class="form-group"
                             style="vertical-align: middle;line-height: 34px;padding-bottom: 30px;">
                            <div class="col-md-1">
                                <span style="font-size: 14px;">类型：</span>
                            </div>
                            <div class="col-md-11" style="padding: 0;">
                                <select name="belong" class="selectpicker form-control" data-live-search="true"
                                        style="display: none;">
                                    <option value="1">文档</option>
                                    <option value="2">SHELL 脚本</option>
                                    <option value="3">PYTHON 脚本</option>
                                    <option value="4">BAT 脚本</option>
                                    <option value="5">其它脚本</option>
                                </select>
                            </div>
                        </div>

                        <div class="full-width">
                        <textarea id="write_doc_area" name="content" class="ckeditor"
                                  placeholder="运维文档">{{ doc_info.doc_content }}</textarea>
                        </div>

                        <!-- 设置编辑框高度 -->
                        <script>
                            CKEDITOR.replace('write_doc_area', {
                                height: 520
                            });
                        </script>

                    </div>
                </form>

                <div class="modal-footer" style="padding-right: 15px;padding-top: 10px; padding-bottom: 10px;">
                    <a class="btn btn-sm btn-default" data-dismiss="modal">取消</a>
                    <a class="btn btn-sm btn-default" id="id_AddDocumentBtn">添加</a>
                </div>

            </div>
        </div>
    </div>
{% endblock base_footer_html %}



{% block base_footer_js %}
    <!-- 选择筛选跳转 -->
    <script type="text/javascript">
        $(".selectBox").on("change", ".selectpicker2", function () {
            var i = $(this).parent().index()
            var v = $(this).val()
            console.log(i, v)

            if (i == 1) {
                window.location.href = changeURLArg(window.location.href, 'user', v)
            }
        })

        function changeURLArg(url, arg, arg_val) {
            var pattern = arg + '=([^&]*)';
            var replaceText = arg + '=' + arg_val;
            if (url.match(pattern)) {
                var tmp = '/(' + arg + '=)([^&]*)/gi';
                tmp = url.replace(eval(tmp), replaceText);
                return tmp;
            } else {
                if (url.match('[\?]')) {
                    return url + '&' + replaceText;
                } else {
                    return url + '?' + replaceText;
                }
            }
        }
    </script>

    <script>
        $('#AddDocumentModal').off('shown.bs.modal').on('shown.bs.modal', function (e) {
            $(document).off('focusin.modal');
        });
    </script>


    <!-- 添加文档提交 -->
    <script>
        $(function () {
            //处理CKEDITOR的值
            function CKupdate() {
                for (instance in CKEDITOR.instances)
                    CKEDITOR.instances[instance].updateElement();
            }

            // 提交表单
            $('#id_AddDocumentBtn').on('click', function () {
                CKupdate();

                console.log('haha'),

                    $.ajax({
                        cache: false,
                        type: "POST",
                        url: "{% url 'document:doc_add' %}",
                        data: $('#id_AddDocumentForm').serialize(),
                        async: true,
                        beforeSend: function (xhr, settings) {
                            // 这里需要csrf_token的值，而不是代码
                            xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                        },
                        success: function (data) {
                            if (data.status == 'success') {
                                window.location.reload();
                            } else if (data.status == 'failed') {
                                window.alert(data.msg);
                            }
                        }
                    });
            });
        })
    </script>
{% endblock base_footer_js %}